<template>
  <div class="order_list">
    <div class="header">
      <div class="left">
        <div class="li_td">订单信息</div>
        <div class="li_dd">
          <p>积累订单:{{ data.order_count }}</p>
          <p>总消费:￥{{ data.sum_price }}</p>
        </div>
      </div>
      <div class="right">
        <img src="../../assets/icon/order/one.png" alt="" />
      </div>
    </div>
    <div class="order_nav">
      <a @click="tabList(0)" :class="index == 0 ? 'active' : ''"
        ><p>待付款</p>
        <div>{{ data.unpaid_count }}</div></a
      >
      <a @click="tabList(1)" :class="index == 1 ? 'active' : ''"
        ><p>待发货</p>
        <div>{{ data.order_count }}</div></a
      >
      <a @click="tabList(2)" :class="index == 2 ? 'active' : ''"
        ><p>待收货</p>
        <div>0</div></a
      >
      <a @click="tabList(3)" :class="index == 3 ? 'active' : ''"
        ><p>待评价</p>
        <div>0</div></a
      >
      <a @click="tabList(4)" :class="index == 4 ? 'active' : ''"
        ><p>已完成</p>
        <div>0</div></a
      >
    </div>

    <div class="loading" v-if="isloading">
      <img src="../../assets/icon/common/shuaxin.png" alt="" class="rr" />
    </div>

    <ul class="list">
      <li v-for="(item, i) in list" :key="i">
        <a>
          <list-item
            :id="item.id"
            :order_id="item.order_id"
            :_pay_time="item._pay_time"
            :_add_time="item._add_time"
            :pay_price="item.pay_price"
            :cartInfo="item.cartInfo"
            :status="item.status"
            @cancel-order="cancelOrder"
            @set-pay="setPay"
          ></list-item>
        </a>
      </li>
    </ul>

    <div class="no_good" v-if="isShow">
      <img src="../../assets/icon/common/no_goods.png" alt="" />
    </div>

    <van-popup
      v-model="show"
      closeable
      :round="true"
      position="bottom"
      :style="{ height: '36%' }"
    >
      <div class="pay_box">
        <div class="p_title">选择支付方式</div>
        <ul class="type">
          <li class="weixi" @click="goPayFn('weixin')">
            <div class="left">
              <div class="ty_icon">
                <img src="../../assets/icon/common/wei.png" alt="" />
              </div>
              <div class="ty_inf">
                <div class="ht">微信支付</div>
                <div class="hb">使用微信快捷支付</div>
              </div>
            </div>
            <div class="rigth">
              <van-icon name="arrow" />
            </div>
          </li>
          <li class="yue" @click="goPayFn('yue')">
            <div class="left">
              <div class="ty_icon">
                <img src="../../assets/icon/common/ye.png" alt="" />
              </div>
              <div class="ty_inf">
                <div class="ht">余额支付</div>
                <div class="hb">
                  当前可用余额为:<span class="y_count">
                    {{ userInfo.now_money }}</span
                  >
                </div>
              </div>
            </div>
            <div class="rigth">
              <van-icon name="arrow" />
            </div>
          </li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Popup } from "vant";
import { Toast } from "vant";
import ListItem from "@/views/order/OrderListItem.vue";
export default {
  name: "OrderList",
  data() {
    return {
      show: false,
      index: 0,
      list: [],
      data: {},
      isShow: false,
      isloading: false,
      userInfo: {},
      uni: "",
      paytype: "",
    };
  },
  components: {
    ListItem,
  },
  created() {
    this.index = this.$route.params.type;
    this.getOrderData(this.index);
    this.getUserInfo();
  },
  watch: {
    isloading(val) {
      let len = this.list.length;
      if (val) {
        this.isShow = false;
      } else {
        if (len == 0) {
          this.isShow = true;
        } else {
          this.isShow = false;
        }
      }
    },
  },
  methods: {
    tabList(index) {
      this.index = index;
      this.$router.push("/order/list/" + index);
      this.getOrderData(index);
      console.log(this.$route.params.type);
    },

    getOrderData(type) {
      this.list = [];
      let token = localStorage.getItem("token");
      let loading = localStorage.getItem("loading");
      if (loading) {
        this.isloading = loading;
      }
      axios({
        url: `/api/order/list?page=1&limit=20&type=${type}`,
        method: "get",

        headers: {
          "Authori-zation": "Bearer " + token,
        },
      })
        .then((res) => {
          axios({
            url: `/api/order/data`,
            method: "get",

            headers: {
              "Authori-zation": "Bearer " + token,
            },
          }).then((ress) => {
            this.data = ress.data.data;
            console.log("cxxx", this.data);
          });

          let { data } = res.data;
          console.log(res.data);
          console.log(data);
          data.forEach((item) => {
            let obj = {};
            obj.id = item.id;
            obj.order_id = item.order_id;
            obj._pay_time = item._pay_time;
            obj._add_time = item._add_time;
            obj.pay_price = item.pay_price;
            obj.cartInfo = item.cartInfo;
            obj.status = item._status._type;

            this.list.push(obj);
          });

          this.isloading = false;
          localStorage.setItem("loading", true);
          // console.log("成功", res.data);
        })
        .catch((err) => {
          console.log();
        });
    },

    cancelOrder(val) {
      this.list.some((item, index) => {
        if (item.order_id == val) {
          this.list.splice(index, 1);
          this.data.unpaid_count = this.list.length;
          console.log(this.list.length);

          return;
        }
      });
    },

    getUserInfo() {
      let token = localStorage.getItem("token");
      axios({
        url: `/api/userinfo`,
        method: "get",

        headers: {
          "Authori-zation": "Bearer " + token,
        },
      }).then((res) => {
        console.log("用户", res.data);
        this.userInfo.now_money = res.data.data.now_money;
      });
    },

    setPay(obj) {
      this.show = obj.show;
      this.uni = obj.order_id;
    },

    goPayFn(paytype) {
      this.paytype = paytype;
      let token = localStorage.getItem("token");
      axios({
        url: `/api/order/pay`,
        method: "POST",
        data: {
          uni: this.uni,
          paytype: this.paytype,
          from: "weixinh5",
        },
        headers: {
          "Authori-zation": "Bearer " + token,
        },
      }).then((res) => {
        console.log("支付吧", res.data);
        if (res.data.msg.includes("错误")) {
          this.$paytoast.show('支付中....',500)
          setTimeout(()=>{
            this.$loadtoast.show(res.data.msg,500)
          },500)
        }
        else if(res.data.msg.includes("余额不足")){
          this.$paytoast.show('支付中....',500)
          setTimeout(()=>{
            this.$toast.show("余额不足",500)
          },500)
        }
        else{
          this.$paytoast.show('支付中....',500)
          
          setTimeout(()=>{
            Toast.success(res.data.msg);
            this.cancelOrder(this.uni)
          },500)
        }
      });

      this.show = false;
    },

    goBack(){
      this.$router.push("/user")
    }
  },
  mounted(){
     if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", this.goBack, false);
    }
  },
  destroyed(){
    
    window.removeEventListener("popstate", this.goBack, false);
  }
};
</script>

<style lang="scss" scoped>
.header {
  height: 130px;
  background-color: #e93323;
  padding: 25px 15px 0;
  display: flex;
  justify-content: space-between;
  .left {
    .li_td {
      color: #fff;
      font-size: 17px;
      margin-bottom: 10px;
    }
    .li_dd {
      display: flex;
      color: hsla(0, 0%, 100%, 0.8);
      font-size: 13px;
      font-family: guildfordprobook\5;
      p:nth-child(1) {
        margin-right: 11px;
      }
    }
  }
  .right {
    > img {
      width: 61px;
    }
  }
}
.order_nav {
  margin: -30px auto 0;
  background-color: #fff;
  width: 345px;
  height: 70px;
  display: flex;
  justify-content: space-around;
  a {
    color: #282828;
    font-weight: 400;
    text-align: center;
    font-size: 13px;
    display: block;
    display: flex;
    flex-direction: column;
    justify-content: center;
    > p {
      margin-bottom: 5px;
    }
  }

  a.active {
    font-size: 14px;
    font-weight: 600;

    border-bottom: 2px solid #e93323;
  }
}
.list {
  width: 345px;
  margin: 12px auto 0;
  li {
    margin-bottom: 10px;
  }
}

.no_good {
  width: 200px;
  height: 150px;
  margin: 40px auto 0;
  > img {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.pay_box {
  width: 100%;

  .p_title {
    padding: 0 15px;
    text-align: center;
    line-height: 60px;
    height: 60px;
    font-weight: 600;
    font-size: 17px;
    color: #282828;
    border-bottom: 0.01rem solid #eee;
  }
  .type {
    padding-left: 15px;
    li {
      height: 65px;
      padding-right: 15px;
      display: flex;
      justify-content: space-between;
      border-bottom: 0.01rem solid #eee;
      .left {
        display: flex;
        align-items: center;
        .ty_icon {
          width: 23px;
          height: 23px;
          margin-right: 15px;
          > img {
            width: 100%;
            height: 100%;
          }
        }
        .ty_inf {
          .ht {
            font-size: 16px;
            color: #282828;
          }
          .hb {
            font-size: 12px;
            color: #999;
            .y_count {
              color: #ffa217;
            }
          }
        }
      }

      .rigth {
        height: 65px;
        line-height: 65px;
        font-size: 16px;
        color: #a7a7a7;
      }
    }
  }
}
</style>

